<template>
	<view class="container container-bg">
		<!-- 上传配件信息 -->
		<u-form :model="form" :border-bottom="false" ref="uForm" label-width="auto">
			<u-form-item label-width="120" required="true" label="配件名称" prop="parts_type">
				<u-input v-model="form.parts_type" placeholder="请输入配件名称" />
			</u-form-item>
			<u-form-item label-width="120" required="true" label="配件价格" prop="buy_price">
				<u-input v-model="form.buy_price" type="number" placeholder="请输入配件价格/单位'元'" />
			</u-form-item>
			<u-form-item label-width="120" required="true" label="购买地址" prop="buy_address">
				<u-input v-model="form.buy_address" type="number" placeholder="请输入配件购买地址" />
			</u-form-item>
			<u-form-item label-width="120" required="true" label="配件编号" prop="parts_id">
				<view class="u-flex">
					<u-input class="u-flex-1" disabled="true" v-model="form.parts_id" placeholder="请点击获取配件编号" />
					<u-button v-if="!form.parts_id" :disabled="getPartsIDdisable" class="u-margin-left-20" type="primary" @click="getPartsID" size="mini">点击获取编号</u-button>
				</view>
			</u-form-item>
			<u-form-item label-width="120" required="true" label="购买时间" prop="buy_date">
				<u-input v-model="form.buy_date" placeholder="请选择配件购买时间" type="select" :select-open="buyTimeShow" @click="buyTimeShow = true" />
				<u-picker mode="time" v-model="buyTimeShow" @confirm="buyTimeConfirm"></u-picker>
			</u-form-item>
			<u-form-item label-width="120" label-position="top" required="true" label="购买票据">
				<z-upload @resolveImgs="resolveImgs" @failImgs="failImgs"></z-upload>
				<view class="u-flex u-flex-wrap">
					<view class="imgs u-rela" v-for="(path,index) in form.parts_receipt" :key="index">
						<image :src="path" class="receiptImg"></image>
						<u-icon class="delete-icon u-abso" @click="closeImg(index)" name="close"></u-icon>
					</view>
				</view>
			</u-form-item>
		</u-form>
		<u-button class='u-margin-20' :disabled="submitBtnDis" type="primary" @click="submit">确认添加</u-button>
	
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import uploadFiles from "@/common/uploadFiles.js";
	import getRandomID from "@/common/getRandomID.js";
	import deleteFile from "@/common/deleteFiles.js";
	export default {
		data() {
			return {
				submitBtnDis: false,
				getPartsIDdisable: false,
				buyTimeShow: false,
				form: {
					parts_type: "",
					buy_date: "",
					buy_address: "",
					buy_price: "",
					parts_id: "",
					parts_receipt: [] //票据
				},
				rules: {
					parts_type: [{
						required: true,
						message: "请输入配件类型",
						trigger: ['blur', 'change']
					}],
					buy_date: [{
						required: true,
						message: "请选择购买时间",
						trigger: ['blur', 'change']
					}],
					buy_address: [{
						required: true,
						message: "请输入购买地址",
						trigger: ['blur', 'change']
					}],
					buy_price: [{
						required: true,
						message: "请输入购买价格",
						trigger: ['blur', 'change']
					}],
					parts_id: [{
						required: true,
						message: "请点击右侧按钮获取编号",
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onLoad(params) {
			if(Object.keys(params).length > 0){
				this.getPartsData(params.partsID)
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			async getPartsData(_id){
				this.$loading("正在加载");
				let res = await this.$network({
					api:"main",
					data:{
						action:"disposeData/getPartsInID",
						data:{_id}
					}
				})
				uni.hideLoading()
				if(res.status === 0){
					Object.assign(this.form,res.data[0]);
				}
			},
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
							this.submitBtnDis = true;
							this.$loading("正在保存")
							let res = await this.$network({
								api: "main",
								data:{
									action:"disposeData/setPartsInfo",
									data:this.form
								}
							});
							uni.hideLoading();
							this.submitBtnDis = false;
							if (res.status === 0) {
								Object.assign(this.$data,this.$options.data())
								this.$refs.uToast.show({
									title: '保存成功',
									type: 'success'
								})
							}
					}
				})
			},
			//获取配件编号
			getPartsID() {
				this.$loading("正在获取");
				this.getPartsIDdisable = true;
				// （pt+8位随机数）
				var id = getRandomID();
				this.checkPartsID("pt" + id);
			},
			async checkPartsID(id){
				var res = await this.$network({
					api: "main",
					data: {
						action:"disposeData/checkPartsID",
						data:{id}
					}
				});
				
				if (res.status === 0) {
					uni.hideLoading();
					this.form.parts_id = id;
					this.getPartsIDdisable = false;
				} else if (res.status === 1) {
					this.getPartsID(); // 重复，重新获取
				}
			},
			buyTimeConfirm(params) {
				let {day,month,year} = params;
				this.form.buy_date = `${year}-${month}-${day}`;
			},
			//删除票据
			async closeImg(index){
				let fileList = [];
				this.$loading('正在删除')
				fileList.push(this.form.parts_receipt[index])
				this.form.parts_receipt.splice(index,1);
				let deleteRes = await deleteFile(fileList);
				uni.hideLoading();
				if(deleteRes){
					this.$refs.uToast.show({
						title: '删除成功',
						type: 'success'
					})
				}
			},
			//保存票据
			async resolveImgs(imgs){
				let uploadRes = await uploadFiles(imgs);
				if(uploadRes.code === 0){
					uploadRes.res.forEach(item=>{
						this.form.parts_receipt.push(item.fileID);
					})
				}
			},
			failImgs(err){
				this.$refs.uToast.show({
					title: '获取图片失败',
					type: 'error'
				})
			}
		}
	}
</script>

<style lang="scss">
	.imgs{
		width: 160rpx;
		height: 160rpx;
		margin-top: 20rpx;
		margin-right: 20rpx;
	}
	.receiptImg{
		width: 160rpx;
		height: 160rpx;
	}
	.delete-icon{
		top: 30rpx;
		right: 10rpx;
		color: red;
	}
</style>
